import React, { PureComponent } from 'react';
import { StatusBar } from 'react-native';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';

import TabBarItem from './widget/TabBarItem'

import HomeScene from './scene/Home/HomeScene'
import NearbyScene from './scene/Nearby/NearbyScene'
import OrderScene from './scene/Order/OrderScene'
import MineScene from './scene/Mine/MineScene'

import WebScene from './widget/WebScene'
import GroupPurchaseScene from './scene/GroupPurchase/GroupPurchaseScene'

const lightContentScenes = ['Home', 'Mine']

/**
 * 下方的标签栏
 * Tab界面(选项卡和路由的关系)
 */
const Tab = TabNavigator(
  {
    Home: {
      screen: HomeScene,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '团购',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItem
            tintColor={tintColor}
            focused={focused}
            normalImage={require('./img/tabbar/pfb_tabbar_homepage@2x.png')}
            selectedImage={require('./img/tabbar/pfb_tabbar_homepage_selected@2x.png')}
          />
        )
      }),
    },
    Nearby: {
      screen: NearbyScene,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '附近',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItem
            tintColor={tintColor}
            focused={focused}
            normalImage={require('./img/tabbar/pfb_tabbar_merchant@2x.png')}
            selectedImage={require('./img/tabbar/pfb_tabbar_merchant_selected@2x.png')}
          />
        )
      }),
    },
    Order: {
      screen: OrderScene,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '订单',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItem
            tintColor={tintColor}
            focused={focused}
            normalImage={require('./img/tabbar/pfb_tabbar_order@2x.png')}
            selectedImage={require('./img/tabbar/pfb_tabbar_order_selected@2x.png')}
          />
        )
      }),
    },
    Mine: {
      screen: MineScene,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '我的',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItem
            tintColor={tintColor}
            focused={focused}
            normalImage={require('./img/tabbar/pfb_tabbar_mine@2x.png')}
            selectedImage={require('./img/tabbar/pfb_tabbar_mine_selected@2x.png')}
          />
        )
      }),
    },
  },
  {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',// 显示在底端，android 默认是显示在页面顶端的
    swipeEnabled: false,// 禁止左右滑动
    animationEnabled: false,// 切换页面时不显示动画
    lazy: true,
    tabBarOptions: {
      activeTintColor: '#06C1AE',
      inactiveTintColor: '#979797',
      labelStyle: {
        fontSize: 12,
      },
      style: {
        backgroundColor: '#fff',
      },
    },
  }
);

/**
 * 上方导航栏
 * 生成路由关系
 * 1、路由配置和路由名称的一种映射
 * 2、路由选项
 */
const Navigator = StackNavigator(
  {
    Tab: { screen: Tab },
    Web: { screen: WebScene },
    // GroupPurchase: { screen: GroupPurchaseScene },
  },
  {
    navigationOptions: {
      headerBackTitle: null,
      headerTintColor: '#333',
      showIcon: true,
    }
  }
);

/**
 * 获取导航路由名称
 * @param {*} navigationState 
 */
function getCurrentRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getCurrentRouteName(route);
  }
  return route.routeName;
}

class RootScene extends PureComponent {
  constructor() {
    super()
    StatusBar.setBarStyle('light-content')
  }

  render() {
    return (
      <Navigator onNavigationStateChange={
        (prevState, currentState) => {
          const currentScene = getCurrentRouteName(currentState);
          const previousScene = getCurrentRouteName(prevState);
          if (previousScene !== currentScene) {
            if (lightContentScenes.indexOf(currentScene) >= 0) {
              StatusBar.setBarStyle('light-content')
            } else {
              StatusBar.setBarStyle('dark-content')
            }
          }
        }
      } />
    )
  }
}

export default RootScene;
